<template>
  <div>
    <div class="loading" v-if="loading">数据加载中…</div>
    <div id="ranking" v-if="!loading">
      <div class="title">官方榜</div>
      <div class="box" v-for="(item, index) of music" :key="index">
        <div class="imgbox">
          <img :src="item.coverImgUrl" alt="" />
          <span>3月11号更新</span>
        </div>
        <ul>
          <li
            v-for="(i, index) of item.songs"
            :key="index"
            @click="addMusic(i.id)"
          >
            <span class="index">{{ index + 1 }}</span
            >{{ i.name }} <span v-show="i.alia">({{ i.alia }})</span>
            <span class="author">{{ i.ar }}</span>
          </li>
          <li id="all" @click="showAllmusic(item.id)">查看全部></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
export default {
  name: "RankingList",
  data() {
    return {
      loading: true,
      music: [],
    };
  },
  computed: {
    ...mapState("songAbout", ["index", "singinglist"]),
  },
  methods: {
    showAllmusic(id) {
      this.$bus.$emit("ToListing", id);
      console.log(id);
    },
    addMusic(id) {
      //遍历当前播放列表数组，查看点击的歌曲是否存在当前歌单
      let result = this.singinglist.findIndex((item) => {
        return item.id === id;
      });
      if (result == -1) {
        //当前播放列表不包含该歌曲,则添加到当前列表
        axios
          .get("http://localhost:8013/api/song/detail?ids=" + id)
          .then((res) => {
            this.singinglist.splice(this.index + 1, 0, res.data.songs[0]);
            this.$store.dispatch("songAbout/playsongid", this.index + 1);
          });
      } else {
        //当前播放列表包含该歌曲
        this.$store.dispatch("songAbout/playsongid", result);
      }
    },
  },
  mounted() {
    axios.get("http://localhost:8013/api/toplist").then((res) => {
      console.log(res);
      for (let i = 0; i < 4; i++) {
        const obj = {};
        obj.name = res.data.list[i].name;
        obj.id = res.data.list[i].id;
        obj.coverImgUrl = res.data.list[i].coverImgUrl;
        obj.songs = [];

        axios
          .get(
            "http://localhost:8013/api/playlist/track/all?id=" +
              res.data.list[i].id +
              "&limit=5&offset=0"
          )
          .then((res) => {
            res.data.songs.forEach((item) => {
              console.log(item);
              const obj2 = {};
              obj2.name = item.name;
              obj2.id = item.id;
              obj2.ar = item.ar[0].name;
              obj2.alia = item.alia[0];
              obj.songs.push(obj2);
              this.loading = false;
            });
          });
        this.music.push(obj);
      }
    });
  },
};
</script>

<style scoped>
#ranking {
  padding: 0px 60px 60px;
  /* background: blueviolet; */
  line-height: 20px;
  text-align: left;
}
#ranking .title {
  height: 50px;
  font-weight: 600;
  font-size: 20px;
  line-height: 50px;
}
#ranking .box {
  height: 180px;
  margin: auto;
  margin: 20px auto 60px;
}
#ranking .box .imgbox {
  width: 16%;
  height: 180px;
  border-radius: 10px;
  overflow: hidden;
  float: left;
  margin-right: 1%;
  position: relative;
}
#ranking .box .imgbox img {
  width: 100%;
  height: 100%;
}
#ranking .box .imgbox span {
  position: absolute;
  top: 66%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 12px;
}
#ranking .box ul {
  width: 80%;
  float: right;
  position: relative;
}
#ranking .box ul li {
  height: 36px;
  line-height: 36px;
  padding-left: 10px;
  font-size: 13px;
}
#ranking .box ul li:hover {
  background: #f5f5f5;
}
#ranking .box ul li span {
  font-weight: 400;
  padding-right: 10px;
  padding-left: 5px;
  height: 36px;
  line-height: 36px;
  color: #aaa;
  font-size: 13px;
}
#ranking .box ul li .index {
  font-weight: 600;
}
#ranking .box ul li:nth-child(1) .index,
#ranking .box ul li:nth-child(2) .index,
#ranking .box ul li:nth-child(3) .index {
  color: rgb(0, 173, 116);
}
#ranking .box ul li .author {
  position: absolute;
  right: 5px;
  font-weight: 400;
}
#ranking .box ul #all {
  position: absolute;
  height: 25px;
  line-height: 25px;
  font-size: 12px;
  color: #333;
  background: #fff;
}
#ranking .box li:nth-of-type(odd) {
  background: #fafafa;
}
#ranking .box li:hover {
  /* background: #f1f1f1; */
}
</style>